import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, Icon } from 'antd'
import echarts from 'echarts'
import { mapData } from '../data/qinghai'

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      
    }
  }

  componentDidMount(){
    // JSON
    echarts.registerMap('青海', mapData);
    var chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        series: [{
            map: '青海',
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            data: [{
              name:"西宁",value:[101.767921,36.640739,12]
            },
            {
              name:"果洛州",value:[100.223723,34.480485,11]
            },
            {
              name:"海东地区",value:[102.085207,36.51761,11]
            },
            {
              name:"海北州",value:[100.879802,36.960654,11]
            },
            {
              name:"海南州",value:[100.624066,36.284364,11]
            },
            {
              name:"海西州",value:[97.342625,37.373799,11]
            },
            {
              name:"黄南州",value:[102.0076,35.522852,11]
            },
            {
              name:"玉树州",value:[97.013316,33.00624,14]
            }],
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(255, 255, 255, 0.8)',
                    color: '#fec42c'
                },
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            }
        }],
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + ' : ' + params.value[2];
            }
        },
        geo: {
          map: '青海',
          label: {
              emphasis: {
                  show: false
              }
          },
          itemStyle: {
              normal: {
                  areaColor: '#ccdce9',
                  borderColor: '#6db4ef' 
              },
              emphasis: {
                  areaColor: '#afd2ef'
              }
          }
      },
    });
  }

  pageOnChange = (page)=>{
    this.loadData(page);
  }

  fun = () => {
    
  }
  
  render() {

    return (
    	<div>
        <div id="map" style={{height:400}}></div>
    	</div>
    )
  }
}

function mapStateToProps(state) {
  return {
    
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(ModuleName)
